<template>
  <div>
    <!-- 用户查询界面 -->
    <div>
      <div class="searchArea">
        <div class="btns">
          <LoginButton class="margin-10" title="新增" />
        </div>
      </div>

      <table class="shadow">
        <thead>
          <tr>
            <td>名称</td>
            <td>权限编码</td>
            <td>菜单URL</td>
            <td>菜单组件</td>
            <td>排序号</td>
            <td>状态</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ this.routerTable.name }}</td>
            <td>权限编码{{ this.routerTable.name }}</td>
            <td>{{ this.routerTable.path }}</td>
            <td>{{ this.routerTable.component.name }}</td>
            <td>1</td>
            <td>
              <span style="width: 50px; height: 50px" class="normal">正常</span>
            </td>
            <td class="mainmenu"><a>编辑</a><a>删除</a></td>
          </tr>
          <template
            v-for="(childRoute, i) in this.routerTable.children"
            :key="childRoute.path"
          >
            <tr
              v-if="
                this.routerTable.children &&
                this.routerTable.children.length > 0
              "
            >
              <td>{{ childRoute.name }}</td>
              <td>权限编码：{{ childRoute.name }}</td>
              <td>
                <span>{{ this.routerTable.path }}/</span>{{ childRoute.path }}
              </td>
              <td>{{ this.routerTable.component.name }}</td>
              <td>{{ i + 1 }}</td>
              <td>
                <span
                  style="width: 50px; height: 50px"
                  :class="childRoute.meta.show === true ? 'normal' : 'disable'"
                  >{{ routerStatus(childRoute.meta.show) }}</span
                >
              </td>
              <td>
                <a @click="editMenu(childRoute,i)">编辑</a>
                <el-dialog
                  v-model="this.dialogDisable"
                  width="35%"
                  title="编辑菜单"
                  :modal="false"
                  destroy-on-close
                >
                  <el-form label-width="80px" :model="this.menuForm">
                    <el-form-item label="菜单名称">
                      <el-input v-model="menuForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                      <el-input-number
                        v-model="menuForm.order"
                        :min="1"
                        :max="this.routerTable.children.length"
                      />
                    </el-form-item>
                    <el-form-item label="路由地址">
                      <el-input v-model="menuForm.routerPath"></el-input>
                    </el-form-item>
                    <el-form-item label="权限编码">
                      <el-input
                        v-model="menuForm.permissionEncoding"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="路由地址">
                      <el-radio-group v-model="this.menuForm.menuStatus">
                        <el-radio label="正常"></el-radio>
                        <el-radio label="禁用"></el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                      <div style="margin-left: 100px;">
                        <el-button type="primary" @click="sureSave()">确定</el-button>
                        <el-button @click="this.dialogDisable=false">取消</el-button>
                      </div>
                    </el-form-item>
                  </el-form>
                </el-dialog>
                <a>删除</a>
              </td>
            </tr>
          </template>
        </tbody>
        <tbody>
          <tr v-for="(u, index) in users" :key="index">
            <td>{{ index + (params.pageNum - 1) * params.pageSize + 1 }}</td>
            <td>
              <div class="imgBar">
                <img :src="u.userImg" alt="tx" height="50" />
              </div>
            </td>
            <td>{{ u.userName }}</td>
            <td>{{ u.registrationDate }}</td>
            <td>{{ u.userEmail }}</td>
            <td :style="{ color: u.userState == 0 ? 'green' : 'brown' }">
              {{ u.userState == 0 ? "在线" : "离线" }}
            </td>
            <td>
              {{ $store.state.authTable[u.authId-1]?.name }}
            </td>
          </tr>
          <tr v-if="users?.length == 0">
            <td>....</td>
            <td>....</td>
            <td>.......</td>
            <td style="color: #b10c7a">
              什么也没查到捏 <span style="color: #2151f1">┑(￣Д ￣)┍</span>
            </td>
            <td>....</td>
            <td>....</td>
            <td>....</td>
          </tr>
        </tbody>
      </table>
      <!--分页-->
      <div class="demo-pagination-block" style="margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import LoginButton from "../Others/LoginButton.vue";
import router from "@/router";
export default {
  name: "MenuManage",
  components: {
    LoginButton,
  },
  data() {
    return {
      params: {
        key: "",
        pageNum: 1,
        pageSize: 5,
        searchType: 0,
      },
      index:0,
      childrenIndex:0,
      total: 0,
      routerTable: {},
      dialogDisable: false,
      menuForm: {
        name: "",
        order: 1,
        routerPath: "",
        permissionEncoding: "",
        menuStatus: "",
      },
    };
  },
  created() {
    //获取路由信息
    const index = router.options.routes.findIndex(
      (item) => item.path === "/user"
    );
    this.index=index
    this.routerTable = router.options.routes[index];
    console.log(this.$route);
    
  },

  methods: {
    //打开编辑
    editMenu(formData,index){
      this.dialogDisable=true
      console.log(index);
      this.childrenIndex=index
      const menuForm = {
      name: formData.name,
      routerPath: formData.path,
      order: index + 1,
      permissionEncoding: formData.name,
      menuStatus: formData.meta.show ? "正常" : "禁用",
    };
    this.menuForm = Object.assign({}, menuForm);
    },
    //确认保存
    sureSave(){
      let index =this.childrenIndex
      let showStatus=this.menuForm.menuStatus ==="正常" ? true : false
      // this.$route.matched[0].children[Index].meta.show=showStatus
      this.$route.matched[0].children[index].meta.show=showStatus
      this.dialogDisable=false
    },
    
    
  },
  computed: {
    routerStatus() {
      return function (status) {
        if (status) {
          return "正常";
        } else {
          return "禁用";
        }
      };
    },

  },
};
</script>

<style scoped>
.demo-pagination-block {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.title {
  font-size: 40px;
  padding-top: 20px;
  font-weight: bold;
  color: rgb(0, 0, 70);
  font-style: italic;
  line-height: 120px;
  padding-left: 20px;
}

header .user-drop-list {
  position: absolute;
  right: 20px;
  top: -20px;
  left: auto;
}

.imgBar {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  overflow: hidden;
}
.imgBar img {
  height: 100%;
  width: 100%;
}

.container {
  background-color: rgba(255, 255, 255, 0.5);
  height: 100vh;
  padding-top: 10px;
}

.searchArea {
  display: flex;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.btns {
  margin-top: 15px;
}

table {
  margin-top: 10px;
  width: 100%;
  background-color: rgb(199, 199, 199);
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

tbody tr:nth-child(2n + 1) {
  background-color: rgb(228, 228, 228);
}

tbody tr:hover {
  background-color: rgb(255, 255, 255);
}

tr {
  height: 50px;
}

tr td {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

thead {
  font-weight: bold;
}
.normal {
  background-color: rgba(63, 221, 0, 0.2);
  border-radius: 6px;
  border: 1px solid rgba(1, 167, 37, 0.5);
  color: rgb(14, 172, 0);
  padding: 4px 8px;
}

.disable {
  background-color: rgba(255, 30, 0, 0.2);
  border-radius: 6px;
  border: 1px solid rgba(243, 52, 27, 0.5);
  color: rgb(172, 20, 0);
  padding: 4px 8px;
}
a {
  color: rgb(38, 105, 230);
  margin-right: 10px;
  cursor: pointer;
  position: relative;
}

a:hover {
  color: rgb(5, 42, 110);
  text-decoration: underline;
}
a:nth-child(1)::after {
  content: "|";
  position: absolute;
  top: 0px;
  right: -5px;
  height: 10px;
  width: 0.5px;
  color: grey;
}
.mainmenu a {
  cursor: not-allowed;
}
</style>
